<template>
	<div class="wrapper">

		<v-head></v-head>
		<!-- <v-timer></v-timer> -->
		<el-aside class="sidebar">
			<v-sidebar></v-sidebar>
		</el-aside>
		<div class="content-box" :class="{ 'content-collapse': collapse }">
			<el-main class="content-box" :class="contentBoxClassArr">
				<div class="content">
					<v-tabs></v-tabs>
					<transition name="fade" leave-active-class="animate__animated animate__fadeOutLeft" :appear="true"
						enter-active-class="animate__animated animate__fadeInRight" mode="out-in">
						<keep-alive :include="keepAliveIncludeList" :max="5">
							<router-view></router-view>
						</keep-alive>
					</transition>
				</div>
				<v-footer></v-footer>
			</el-main>
		</div>
	</div>
</template>

<script>
	import vHead from "common/Header.vue";
	import vSidebar from "common/Sidebar.vue";
	import vTabs from "common/Tabs.vue";
	import vFooter from "common/Footer.vue";
	import vTimer from "common/Timer.vue";

	export default {
		data() {
			return {
				keepAliveIncludeList: [],
				response: Object,
				darkModeList: {
					dashBoardMainPage: "content-box-time1",
					dashBoardRealTimeStatus: "content-box-time2",
					dashBoardRealTimeStatus2: "content-box-time3",
					dashBoardOracle: "content-box-time1",
					dashBoardMysql: "content-box-time1",
					dashBoardSqlserver: "content-box-time1",
					dashBoardServer: "content-box-time1",
					dashBoardInternet: "content-box-time1",
					LargeScreen: "content-box-time1",
				},
			};
		},
		components: {
			vHead,
			vSidebar,
			vTabs,
			vFooter,
			vTimer,
		},
		computed: {
			contentBoxClassArr() {
				let _classArr = [];

				let _key = this.$route.meta.menu;

				if (Object.hasOwnProperty.call(this.darkModeList, _key)) {
					for (const key in this.darkModeList) {
						if (key === _key) {
							const _tsTime = this.darkModeList[key];
							_classArr.push("content-box-bg", _tsTime);
						}
					}
				} else {
					_classArr.push("content-box-time1");
				}

				return _classArr;
			},
			collapse() {
				return this.$store.getters.getCollapse;
			},
		},
	};
</script>

<style scoped>
	.content-box {
		padding: 0px;
		padding-bottom: 2px;
	}

	.content-box-bg {
		background-color: rgb(2, 16, 51);
	}

	.content-box-time1 {
		transition: background-color 0.3s !important;
	}

	.content-box-time2 {
		transition: background-color 0s !important;
	}

	.content-box-time3 {
		transition: background-color 0s !important;
	}

	.content {
		height: calc(100% - 24px);
	}

	/* 隐藏滚动条 */
	::-webkit-scrollbar {
		width: 0 !important;
	}

	::-webkit-scrollbar {
		width: 0 !important;
		height: 0;
	}
</style>
